<template>
	<div>
		<el-card>
			<div slot="header">
				<span>管理员信息</span>
			</div>
			<div class="user-cont">
				<!-- <span>管理员信息</span>
      <el-divider class="under-lines"></el-divider> -->
				<span>管理员ID：{{ userInfo.id }}</span>
				<el-divider></el-divider>
				<span>账号：{{ userInfo.account }}</span>
				<el-divider></el-divider>
				<span>用户组：{{ userInfo.userGroup }}</span>
				<el-divider></el-divider>
				<span>创建时间：{{ userInfo.ctime | formatYMDhms }}</span>
				<el-divider></el-divider>
				<div class="manage-img df aic">
					<span>管理员头像：</span>
					<el-upload
						class="avatar-uploader"
						action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
					>
						<img
							v-if="userInfo.imgUrl"
							:src="userInfo.imgUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	import { api_users_avataredit } from "@/apis/user";

	import { mapState,mapActions } from "vuex";
	export default {
		data() {
			return {
				imageUrl: "",
			};
		},
		computed: {
			...mapState("user", ["userInfo"]),
		},
		methods: {
      ...mapActions('user',['$_UserInfo']),
      // 上传成功时钩子函数
			async handleAvatarSuccess(res) {
				let { code, msg, imgUrl } = res;
				if (code == 0) {
					const res = await api_users_avataredit({ imgUrl });
          if(res.data.code==0){
            // 上传成功后，服务器中的图片已经更改，需要再次调用获取用户信息接口，以刷新数据，
             this.$_UserInfo()
            //  this.$message.success(res.data.msg)
          }
				}
			},
			beforeAvatarUpload(file) {
				// file.type === 'image/jpeg';
				const isJPG = /(png|jpeg|webp)/.test(file.type);
				const isLt2M = file.size / 1024 / 1024 / 1024 < 20;

				if (!isJPG) {
					this.$message.error(
						"上传头像图片只能是 JPG/png/webp 格式!"
					);
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 20MB!");
				}
				return isJPG && isLt2M;
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	::v-deep.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 128px;
		height: 128px;
		line-height: 128px;
		text-align: center;
	}
	.avatar {
		width: 128px;
		height: 128px;
		display: block;
	}
</style>
